<template>
  <div id="mains">
    <div class="topInput">
      <div class="topBox topbtn">
        <div class="topbtnInner">
          <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          <el-dialog title="员工加班单" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="加班开始时间" :label-width="formLabelWidth">
                <el-input v-model="form.startTime" autocomplete="on"></el-input>
              </el-form-item>
              <el-form-item label="加班结束时间" :label-width="formLabelWidth">
                <el-input v-model="form.endTime" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="原因" :label-width="formLabelWidth">
                <el-input v-model="form.reason" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="sub()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>

    <div class="innerTableBox">
    <div class="innerTable">
      <el-table
        :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
        border
        @selection-change="handleSelectionChange"
        style="width: 100%;height:324px;margin:0 auto;text-align:center;"
      >
        <el-table-column prop="username" align="center" label="名称" min-width="30%"></el-table-column>
        <el-table-column prop="addtime" align="center" label="申请日期" min-width="40%"></el-table-column>
        <el-table-column prop="otreason" align="center" label="原因" min-width="60%"></el-table-column>
        <el-table-column prop="starttime" align="center" label="加班开始时间" min-width="40%"></el-table-column>
        <el-table-column prop="endtime" align="center" label="加班结束时间" min-width="40%"></el-table-column>
        <el-table-column prop="state" align="center" label="流程状态" min-width="50%"></el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              @input="onInput"
              prefix-icon="iconfont icon-sousuo"
              v-model="searchTableInfo"
              placeholder="请输入搜索内容"
              style="width:260px" ></el-input>
          </template>
          <template slot-scope="scope">
            <div class="seeMoreBox"><el-button type="primary" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button></div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    </div>

    <!-- 查看详情模态框 -->
    <el-dialog title="查看详情" :visible.sync="dialogdetails" v-if="dialogdetails">
      <el-form :model="dialogdetailsInfo">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.name" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="申请日期" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.startTime" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="加班开始时间" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.startTime" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="加班结束时间" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.endTime" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="原因" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.otreason" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="dialogdetailsInfo.address" autocomplete="off" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogdetails = false">取 消</el-button>
        <el-button type="primary" @click="dialogdetails = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      class="pageS"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "mains",
  data() {
    return {
      dialogdetails: false,
      dialogdetailsInfo: {},
      searchTableInfo: "",
      pagesize: 6,
      currpage: 1,
      getSearchInfo: [],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      currentPage: 1,
      size: 5,
      form: {
        name: "",
        startTime: "",
        endTime: "",
        reason: "",
      },
      search: "",
      value: "",
    };
  },
  methods: {
    onInput(){
      console.log(event.target.value);
      // event.target.value = "123123123"
      // this.$forceUpdate();
    },
    handleEdit(index, row) {
      this.dialogdetails = true;
      this.dialogdetailsInfo = {
        name: row.username,
        startTime: row.starttime,
        otreason: row.otreason,
        endTime: row.endtime,
        address: row.state,
      };
    },
    handleDelete(index, row) {},
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    clearDiaLogInner() {
      this.form.endTime = "";
      this.form.startTime = "";
      this.form.name = "";
      this.form.reason = "";
    },
    //操作多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    info() {
      let that = this;
      let url = "/api/selectEmpOverTime";
      let params = {
        empid: 6,
      };
      //这些数据视情况，是你从后端拿来的。

      // axios拿用户加班表的数据

      that
        .$axios({
          method: "post",
          url: url,
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
          data: JSON.stringify(params),
        })
        .then((res) => {
          console.log(res);
          let selectObj = res.data.data;
          console.log(selectObj);
          selectObj.forEach((value, index, arr) => {
            let nowValueState = value.state;
            let tempState = "";
            if (nowValueState == 1) {
              tempState = "审批中";
            } else if (nowValueState == 2) {
              tempState = "审批通过";
            } else if (nowValueState == 3) {
              tempState = "审批失败";
            }
            value.state = tempState;
          });
          that.getSearchInfo = res.data.data;
        });
      this.clearDiaLogInner();
    },
    sub() {
        this.dialogFormVisible = false
        let that = this;
        let url = "/api/insertOverTime";
        console.log(this.form);
        let params = {
          empid: 6,
          starttime: this.form.startTime,
          endtime: this.form.endTime,
          otreason: this.form.reason,
          username: this.form.name,
        };
      if (
        this.form.name !== "" &&
        this.form.startTime !== "" &&
        this.form.endTime !== "" &&
        this.form.reason !== ""
      ) {
        //----------
        //axios添加加班申请
        that.$axios({
            method: "post",
            url: url,
            headers: {
              "Content-Type": "application/json;charset=utf-8",
            },
            data: JSON.stringify(params),
          })
          .then((res) => {
            console.log(res);
            console.log("res");
            that.info();
          });
        // this.info()

        //--------------------
      } else {
        alert("表中有未填项，请继续填写");
      }
    },

    //131231231
  },
  computed: {
    // 根据计算属性模糊搜索
    tableData() {
      const searchTableInfo = this.searchTableInfo;
      if (searchTableInfo) {
        console.log(searchTableInfo);
        console.log(1);
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        console.log(this.getSearchInfo);
        return this.getSearchInfo.filter((data) => {
          console.log(data);
          console.log("success：", data);
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            console.log( String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1);
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
            );
          });
        });
      }
      return this.getSearchInfo;
    },
  },
  created() {
    this.info();
  },
};
</script>

<style scoped>
.pageS{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.seeMoreBox{
  height: 100%;
  width: 30%;
  margin: 0 auto;
}
.tables {
  padding-top: 0;
}
.pageBox {
  margin-left: 50%;
  margin: 0 auto;
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.innerTableBox{
    box-shadow: 0 0 3px 1px #e4e4e4;
  width: 100%;
  height: auto;
}
.innerTable {
  width: 80%;
  padding:30px 0;
  margin: 0 auto;
}
#app {
  width: 100%;
}

.txtBtn {
  margin-left: 10px;
  width: 60%;
}

.topbtnInner {
  width: 60%;
  height: 100%;
}

.topbtn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#mains {
  height: 850px;
}

.el-main {
  line-height: 50px !important;
}

.el-input {
  width: 70% ;
}

.topInput {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.topBox {
  margin-left: 7.1%;
  width: 25%;
  height: 100%;
}
</style>
